import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
  justify-content: space-around;
  width: 100%;
`;

const Data = styled.div`
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
`;

const Label = styled.div`
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #646c7a;
`;

const Text = styled.div`
  margin-top: 21px;
  font-weight: bold;
  color: #2f323e;
  font-size: 24px;
  line-height: 24px;
`;

interface Info {
  countTotal?: number;
  durationTotal?: number;
  countDay?: number;
  durationDay?: number;
}

type Props = {
  info: Info;
  infoType: 'total' | 'today';
};

function APPOverview({info, infoType}: Props) {
  return (
    <Container>
      <Data>
        <Label>{infoType === 'total' ? 'asdasd' : 'dsadasd'}</Label>
        <Text>{infoType === 'total' ? info!.countTotal : info!.countDay}</Text>
      </Data>
      <Data>
        <Label>{infoType === 'total' ? '66' : 'a6sd'}</Label>
        <Text>
          {infoType === 'total'
            ? Math.floor(info!.durationTotal! / 60) || 0
            : Math.floor(info!.durationDay! / 60) || 0}
        </Text>
      </Data>
    </Container>
  );
}

export default APPOverview;
